<template>
	<member-page class="contract-box">
		<u-popup :show="data.show" mode="bottom">
			<view class="popup" style="height: calc(100vh - 400rpx);">
				<view class="popup-title flex">
					<view class="cancle" @click="close"> 取消</view>
					<view class="title"> 抄送人 </view>
					<view class="sure" @click="form.submit()"> 确定</view>
				</view>
				<view class="singe-box">
					<view class="flex" style="justify-content: space-between;align-items: center;margin-bottom: 18rpx;">
						<view style="width: 600rpx; margin:auto;">
							<u-search @search="search(1)" @clear="search(2)" @custom="search(1)" style="width: 200rpx;"
								placeholder="输入完整手机号快捷搜索" v-model="keyword" bgColor="#ffffff" :showAction="true"
								actionText="搜索"></u-search>
						</view>
					</view>
					<scroll-view scroll-y="true" style="widht:100%;min-height: 200rpx; max-height: 520rpx;">
						<view class="singer-item" v-for="(item, index) in data.pageList" :key="index">
							<u-radio-group v-model="data.changeVal">
								<u-radio @change='page.change(item)' shape="circle" :label='item.label' :value='index'
									:name='index'>
								</u-radio>
							</u-radio-group>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
	</member-page>
</template>
<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import {
		defineEmits
	} from 'vue';
	import {
		memberPageList,
	} from "../api/module/contract";
	import {
		isObjectEmpty,
		msg,
		objClear,
		phoneSecret,
	} from "../utils/common";
	import {
		onShow
	} from "@dcloudio/uni-app";
	const keyword = ref('');
	const formRef = ref(null);
	const emit = defineEmits(['return-member']);
	const form = reactive({
		data: ref({}),
		submit: () => {
			if (!isObjectEmpty(form.data)) {
				return msg('请选择抄送人');
			}
			emit('return-member', form.data);
			close();
			//清空数据，防止第二次打开数据继续存在
			keyword.value = '';
			form.data = ref({});
			data.pageList = [];
		}
	});
	const data = reactive({
		changeVal: null,
		show: ref(false),
		pageList: [],
	});
	const page = reactive({
		clearChange: function() {
			data.changeVal = null;
		},
		query: {
			cellphone: '',
		},
		change: (item) => {
			form.data = item;
		},
		queryList: () => {
			if (!data.show) {
				return;
			}
			if (keyword.value.length < 1) {
				return;
			}
			memberPageList({
				cellphone: keyword.value
			}).then(res => {
				let arr = res.map(item => {
					return {
						...item,
						...{
							isCheck: false,
						}
					}
				})
				data.pageList = arr;
			});
		},
	});
	const search = (type) => {
		if (type == 2) {
			keyword.value = ''
		}
		data.pageList = [];
		page.queryList();
	}
	const open = () => {
		data.show = true;
		page.queryList();
	}
	const close = () => {
		data.show = false;
		data.pageList = [];
		form.data = objClear(form.data);
		page.clearChange();
	}
	onShow(() => {});
	defineExpose({
		open,
		close
	});
</script>
<style scoped lang="scss" src="/static/css/contract/initiate.scss"></style>